
<!-- Author:Rain -->
<template>
    <div class="new-guide-common__cont">
        <div class="new-guide-common__title"> 教育经历 3/6 </div>
        <div class="new-guide-common__progress">
            <div class="new-guide-common__progress-inner" style="width: 246px;"></div>
        </div>
        <div class="page-loading" style="display: none;">正在加载中...</div>
        <div class="new-guide-education-info">
            <form autocomplete="off" class="education-info ui-form ui-form-label-top">
                <div class="form-item" ka="edu-degree">
                    <div class="item-label">你的学历是</div>
                    <div class="item-content">
                        <div class="ui-select ui-select-single" ka="resume_form_edit_degree">
                            <div tabindex="0" class="ui-select-selection" @click="select1 = !select1">
                                <div class="ui-select-inner"><span class="ui-select-selected-value">{{ currentEduIndex
                                    < 0 ? "" : degrees[currentEduIndex] }}</span><!----><!----><i
                                                class="ui-icon-arrow-down"></i></div>
                            </div>
                            <div class="ui-select-dropdown" v-if="select1"><!-- 这个地方先展示在这个地方！！ -->
                                <ul class="ui-dropdown-not-found" style="display: none;">
                                    <li>无匹配数据</li>
                                </ul>
                                <ul class="ui-dropdown-list">
                                    <li @click="selectEdu(i)" v-for="edu, i in degrees" :key="i" class="ui-select-item"
                                        :class="{ 'ui-select-item-selected': i == currentEduIndex }">{{ edu }}</li>
                                </ul>
                                <ul class="ui-dropdown-loading" style="display: none;">加载中</ul>
                            </div>
                        </div><!---->
                    </div>
                </div>
                <div class="form-item">
                    <div class="item-label">类型</div>
                    <div class="item-content">
                        <div name="radioGroup_1707831682367_0" class="radio-group radio-group-rectangle">
                            <label class="radio radio-item" :class="{ 'radio-checked': type == '全日制' }"><span
                                    class="radio-inner">
                                    <input name="ex_type" type="radio" value="全日制" v-model="type" class="radio-input">
                                    <i class="radio-edging"></i></span>全日制</label>
                            <label class="radio radio-item" :class="{ 'radio-checked': type == '非全日制' }"><span
                                    class="radio-inner">
                                    <input name="ex_type" type="radio" value="非全日制" v-model="type" class="radio-input">
                                    <i class="radio-edging"></i></span>非全日制</label>
                        </div><!---->
                    </div>
                </div>
                <div class="form-item form-item-required" ka="edu-school">
                    <div class="item-label">你毕业于</div>
                    <div class="item-content">
                        <div class="ui-suggest ui-select ui-dropmenu" placeholder="例如：北京大学" clearable>
                            <div class="ui-dropmenu-label">
                                <div class="ui-suggest-input input-wrap input-wrap-text"><!----><!----><input
                                        autocomplete="on" spellcheck="false" type="text" v-model="school"
                                        placeholder="例如：北京大学" class="input"><span class="suffix suffix-clear"><i
                                            class="suffix-icon ui-icon-circle-close"></i></span><!----><!----><!----></div>
                                <!----><!---->
                            </div>
                            <div class="ui-dropmenu-list"></div>
                        </div><!---->
                    </div>
                </div>
                <div class="form-item" ka="edu-major">
                    <div class="item-label">你的专业</div>
                    <div class="item-content">
                        <div class="ui-suggest ui-select ui-dropmenu" placeholder="例如：计算机科学与技术" clearable>
                            <div class="ui-dropmenu-label">
                                <div class="ui-suggest-input input-wrap input-wrap-text"><!----><!----><input
                                        autocomplete="on" spellcheck="false" type="text" v-model="major"
                                        placeholder="例如：计算机科学与技术" class="input"><span class="suffix suffix-clear"><i
                                            class="suffix-icon ui-icon-circle-close"></i></span><!----><!----><!----></div>
                                <!----><!---->
                            </div>
                            <div class="ui-dropmenu-list"></div>
                        </div><!---->
                    </div>
                </div>
                <!-- 学籍时间 -->
                <RainTime title="开始" @sendTime="hh" :value="splitTimeToV(undergo.start)"/>
                <RainTime title="至" @sendTime="jj" :value="splitTimeToV(undergo.end)"/>
                <div class="have-desc guide-desc form-item" ka="edu-description">
                    <div class="item-label">在校经历 （可简单叙述，在个人简历中详细修改）</div>
                    <div class="item-content">
                        <div class="serial-selecter">
                            <div class="serial-toolbar" style="display: none;"><span class="serial-btn ti-list"><i
                                        class="tip">无序列表</i></span><span class="serial-btn ti-list-ol"><i
                                        class="tip">有序列表</i></span></div>
                            <div class="ipt-wrap">
                                <div class="input-wrap input-wrap-textarea"><textarea v-model="experience" wrap="soft"
                                        autocomplete="on" spellcheck="false" maxlength="300" placeholder="可填写在校期间学习到的主要技能及获得的荣誉" rows="8"
                                        class="input"></textarea><span class="suffix-counter"><em
                                            class>{{ sumWord() }}</em>/300</span><!----></div>
                            </div>
                        </div><!----><!---->
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RainTime} from "@/components/formitems/index"
import splitTimeToV from "@/utils/todo"
let degrees = ["初中及以下",
    "中专/中技",
    "高中",
    "大专",
    "本科",
    "硕士",
    "博士"]
let currentEduIndex = ref(-1);
let select1 = ref(false)//学历下拉框的一个状态
function selectEdu(index: number) {
    currentEduIndex.value = index
    select1.value = false
}
let type = ref("")
let school = ref("")
let major = ref("")
let experience = ref("")
let undergo = reactive({
    start: "",
    end: ""
})

onActivated(() => {
    // 调用时机为首次挂载
    // 以及每次从缓存中被重新插入时
    let guideInfo = JSON.parse(localStorage.getItem("guideInfo") as string)
    //去本地存储中把数据取出来！！！
    let { "guide-3": guide3 } = guideInfo
    currentEduIndex.value=degrees.findIndex(str=>str===guide3.background)
    type.value=guide3.type
    school.value=guide3.school
    major.value=guide3.major
    experience.value=guide3.experience
    //
    Object.assign(undergo,guide3.undergo)
})


onDeactivated(() => {
    //写入本地存储
    let guideInfo = JSON.parse(localStorage.getItem("guideInfo") as string)
    guideInfo["guide-3"] = {
        background: degrees[currentEduIndex.value],//学历背景
        type: type.value,//学历类型
        school: school.value,//毕业学校
        major: major.value,//专业
        undergo:markRaw(undergo),
        experience: experience.value
    }
    
    localStorage.setItem("guideInfo", JSON.stringify(guideInfo))
})

function sumWord(){
    return 1
    // return experience.value.length
}

//学籍开始时间
function hh(value:any){
    let {year,month}=value
    undergo.start=year+"-"+month
}
function jj(value :any){
    let {year,month}=value
    undergo.end=year+"-"+month
}



</script>

<style scoped>
@import url("@/assets/guideCommon.css");

.ui-select {
    display: inline-block;
    width: 300px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
}

.ui-select,
.ui-select-selection {
    box-sizing: border-box;
    position: relative;
}

.new-guide .form-item .item-content .ui-select {
    width: 100%;
}

.ui-select-selection {
    display: block;
    outline: none;
    user-select: none;
    cursor: pointer;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #e3e7ed;
}

.ui-select-selection {
    border: 1px solid #d4d5d6;
}

.new-guide .form-item .item-content .ui-select .ui-select-selection {
    border-color: #f8f8f8;
    border-radius: 8px;
    background: #f8f8f8;
    box-shadow: none;
}

.new-guide .form-item .item-content .ui-select .ui-select-inner {
    padding: 16px;
    width: 100%;
    height: 54px;
    border-radius: 8px;
    font-size: 16px;
    color: #222;
    font-weight: 700;
    box-sizing: border-box;
}

/* 下拉图标 */
.ui-select .ui-icon-arrow-down {
    position: absolute;
    top: 50%;
    right: 8px;
    line-height: 1;
    margin-top: -7px;
    font-size: 14px;
    color: #9fa3b0;
}

.ui-select .ui-select-inner .ui-icon-arrow-down {
    margin-top: -3px;
    right: 16px;
}

.ui-select .ui-select-inner .ui-icon-arrow-down::before {
    content: " ";
    background: url(https://static.zhipin.com/fe-zhipin-geek/web/chat/v5126/static/images/icon-down.6deaf046.png) 0 0 no-repeat;
    background-size: 10px 6px;
    display: block;
    width: 10px;
    height: 6px;
}

/* 下拉框 */
.ui-select-dropdown {
    width: inherit;
    max-height: 200px;
    overflow: auto;
    margin: 1px 0 0;
    padding: 5px 0;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
    position: absolute;
    z-index: 10;
}

.ui-select-dropdown {
    margin-top: 4px;
    border-radius: 8px;
}

.ui-select .ui-select-dropdown {
    max-height: 266px;
}

.ui-select-dropdown .ui-dropdown-loading,
.ui-select-dropdown .ui-dropdown-not-found {
    margin: 0;
    line-height: 1.5;
    padding: 2px 8px;
    color: #d1d4db;
    clear: both;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
}

.ui-select-item {
    margin: 0;
    line-height: 1.5;
    padding: 8px;
    clear: both;
    list-style: none;
    cursor: pointer;
    transition: background .1s ease-in-out;
}

.ui-select-item-selected,
.ui-select-item-selected.ui-select-item-hover,
.ui-select-item-selected:hover {
    color: var(--themeColor);
}

.radio-group,
.radio-group-rectangle {
    width: 492px;
}
</style>